@import '~/assets/style/vars.less';
@import '~/assets/style/mixin.less';

html, body {
  font: 14px/1.47058824  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  background-color: @color-muted;
  // font-size: 16px;
  word-spacing: 1px;
  text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  color: @color-default;
}
// ::-webkit-scrollbar {
//   width: 6px;
//   background-color: transparent;
// }
// ::-webkit-scrollbar-thumb {
//   width: 6px;
//   background-color: #EDEDED;
//   border-radius: 5px;
// }


// Common
// ====================================
.app {
  background-color: @color-muted;
}

.font-bold {
  font-weight: bold;
}
.container {
  margin: 0 auto;
  width: 1000px;
}
.page {
  flex: 1;
  background-color: @color-white;
}
.card-content {
  padding: 50px 88px;
  background-color: transparent;

  .ant-card {
    &-head {
      padding: 0;
      border-bottom: 0;
      &-title {
        font-size: 22px;
        line-height: 30px;
      }
    }
    &-extra,
    &-head-title {
      padding: 0 0 25px;
    }
    &-body {
      padding: 0;
    }
  }
}

// 搜索热词
// ====================================
.hot-keys {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 12px;

  a {
    &, &:hover {
      color: @color-default;
    }
    &:hover {
      text-decoration: underline;
    }
  }

  &-item {
    .text-ellipsis(1);
    position: relative;
    padding: 0 6px;
    width: 50%;

    &:nth-child(odd) {
      padding-left: 0;
    }
    &:nth-child(even) {
      padding-right: 0;
    }
    .icon-hot {
      position: absolute;
      top: -6px;
    }
  }
  &-num {
    display: inline-block;
    padding-right: 6px;
    min-width: 21px;
    text-align: right
  }
}


// Header
// ====================================
@header-height: 50px;
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
  height: @header-height;
  line-height: @header-height;
  background-color: @color-white;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .14);

  // ant design 组件
  .ant {
    // 导航
    &-menu {
      background-color: transparent;
      border-bottom-color: transparent;
      font-size: 16px;
      line-height: 47px;
      color: @color-secondary;

      &-item {
        padding: 0;
        margin: 0 16px;
        border-bottom-width: 3px;

        &:hover, &-selected, &-active {
          border-bottom-width: 3px;
          font-weight: 500;

          &, a, a:hover {
            color: @color-default;
          }
        }
      }
    }

    // 搜索
    &-input {
      width: 94px;
      border-color: @color-concrete;

      &:hover, &focus {
        border-color: @color-default;
      }

      &:focus {
        box-shadow: none;
      }

      &, &-search-button {
        height: 30px;
      }

      &-search-button {
        padding: 0;
        width: 46px;
      }

      &-group-wrapper {
        width: auto;
      }
    }
  }

  .container {
    display: flex;
    align-items: center;
  }

  &-logo {
    margin-right: 16px;
    padding: 16px 0;

    img {
      display: block;
      width: 90px;
      height: 16px;
    }
  }

  &-nav {
    flex: 1;
  }

  &-search {
    margin-left: 16px;
    padding: 10px 0;
    height: @header-height;

    .icon-search {
      font-size: 17px;
      font-weight: 700;
    }

    .ant-btn {
      border-radius: 4px;
    }

    &-wrapper {
      width: 400px;
      height: 30px;

      .ant-input-search {
        float: right;
      }

      &__actived {
        .ant-input {
          width: 354px;
          border-color: @color-default;
        }
      }
    }

    &-content {
      position: relative;
      width: 100%;
      max-height: 420px;
      overflow: hidden;
      overflow-y: auto;
    }

    &-list {
      padding: 10px 0;
      .ant-list {
        &-item {
          margin-bottom: 5px;
          padding: 8px 30px;
          border-bottom: none;
          cursor: pointer;

          &:last-child {
            margin-bottom: 0;
          }

          &:hover {
            background-color: #F4F8FF;
          }

          &-meta {
            &-avatar {
              margin-right: 12px;
            }
            &-title {
              .text-ellipsis(2);
              margin-bottom: 0;
              // font-size: 14px;
              line-height: 20px;
              font-weight: normal;
              color: @color-default;
              .text-keyword {
                color: #0284FF;
                font-size: inherit;
                font-style: normal;
                font-weight: normal;
              }
            }
          }

          .ant-avatar {
            width: 84px;
            height: 47px;
            border-radius: 4px;
          }
        }
      }
    }

    &-history {
      .tags {
        position: relative;
        margin-top: -15px;
        margin-bottom: -16px;
        margin-left: -6px;
        padding-bottom: 6px;
        width: calc(100% + 12px);
        max-height: 130px;
        overflow: hidden;
        .ant-tag {
          margin: 15px 6px 0;
        }
      }

      .hot-keys {
        margin-top: -20px;
        padding-bottom: 8px;
        &-item {
          margin-top: 20px;
        }
      }
    }

    &-section {
      padding: 16px 30px;

      &-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 15px;
        line-height: 20px;

        .icon-trash {
          font-size: 17px;
          color: @color-default;
          cursor: pointer;
        }
      }
      &-title {
        margin-bottom: 0;
        // font-size: 14px;
        color: @color-default;
      }
      &-extra {
        height: 20px;
      }
      &-empty {
        padding: 18px 0;
        text-align: center;
        font-size: 12px;
        color: @color-secondary;
      }
    }

    &-text {
      font-size: 12px;
    }

    &-action {
      margin-left: 18px;
      &, &:hover {
        color: @color-default;
      }
      &:first-child {
        margin-left: 0;
      }
      &:hover {
        text-decoration: underline;
      }
    }

    &-popover {
      position: fixed;
      padding-top: 14px;
      width: 400px;

      .ant-popover {
        &-arrow {
          display: none;
        }

        &-inner {
          box-shadow: 0 0 7px 1px rgba(0, 0, 0, .14);
          border-radius: 4px;
          &-content {
            padding: 0;
            color: @color-secondary;
          }
        }
      }
    }
  }

  &-publish {
    margin-left: 18px;
    font-size: 16px;
    .icon-edit {
      margin-bottom: 3px;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
    a {
      color: @color-primary;

      &:hover {
        color: @color-important;
      }
    }
  }

  &-notify {
    position: relative;
    margin: 0 10px 0 60px;

    .icon-chat {
      display: block;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }

    .dot {
      position: absolute;
      right: 0;
      top: 0;
      width: 8px;
      height: 8px;
      background-color: @color-danger;
      border: 1px solid @color-white;
      border-radius: 50%;
    }
  }

  &-user {
    position: relative;
    margin-left: 10px;
    &-avatar {
      display: block;
      width: 32px;
      height: 32px;
      border-radius: 2px;
    }
    &-honor {
      position: absolute;
      left: calc(100% - 4px);
      bottom: 0;
      padding: 0 8px;
      min-width: 40px;
      height: 14px;
      background-color: #FDED94;
      overflow: hidden;
      border-radius: 10px;
      font-size: 12px;
      line-height: 15px;
      color: @color-default;
      transform: scale(.6);
      transform-origin: left bottom;
    }
    .icon-honor {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      width: 10px;
      height: 10px;
    }
  }
}


// Content
// ====================================
.content {
  display: flex;
  // header height: 50px;
  // footer height: 228px;
  min-height: calc(100% - 278px);
  min-height: calc(100vh - 278px);
  padding-top: 30px;

  &-nofooter {
    min-height: calc(100% - 50px);
    min-height: calc(100vh - 50px);
    padding-bottom: 65px;
  }
}


// Footer
// ====================================
.footer {
  padding: 34px 0 48px;

  &-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    border-bottom: 1px solid #E1E1E1;
    font-size: 12px;

    &:last-child {
      border-bottom-width: 0;
    }
  }

  &-logo {
    width: 73px;
    height: 16px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  &-link {
    /deep/.social {
      justify-content: flex-end;
    }
  }

  &-intro {
    color: @color-secondary;
  }

  &-span {
    padding-bottom: 7px;

    &:last-child {
      padding-bottom: 0;
    }

    span {
      padding-right: 8px;

      &:last-child {
        padding-right: 0;
      }
    }
  }
}
